<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1,width=device-width,viewport-fit=cover">
    <title>飞控控制</title>
    <style>
      body{
        text-align: center;
      }
        #container {
            width: 100%;
            height: 100vh;
        }
        #header {
            padding: 10px;
            background: #333;
            color: white;
        }
        #content {
        }
        #three-container {
            flex: 3;
            width: 200px;
            height: 200px;
            position: relative;
            border: 1px solid #ccc;
        }
        #controls {
            flex: 1;
            padding: 10px;
            background: #f5f5f5;
            overflow-y: auto;
            font-size: 16px;
        }
        .data-display {
            margin-bottom: 15px;
            padding: 10px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
    </style>
  </head>

  <body>
      <h1>飞控控制页面</h1>
      
      <input type="checkbox" id="motor1" onchange="motorChange(this,1)" ><label for="agree">电机1</label>
      <input type="checkbox" id="motor2" onchange="motorChange(this,2)" ><label for="agree">电机2</label>
      <input type="checkbox" id="motor3" onchange="motorChange(this,3)" ><label for="agree">电机3</label>
      <input type="checkbox" id="motor4" onchange="motorChange(this,4)" ><label for="agree">电机4</label>
      <br>
      <Label>速度</Label>
      <input style="width: 100%;" type="range" id="myRange" min="0" max="254" value="0" step="1">
      <label id="speed"></label>
      <div>
        电压:<label id="vol"></label>
      </div>


      <div id="container">
        <div id="header">
            <h1>无人机姿态实时监控</h1>
        </div>
        <div id="content">
            <div>
                <div>
                    <h5>姿态角度</h3>
                    <div id="euler">Roll: 0°, Pitch: 0°, Yaw: 0°</div>
                </div>
              </div>

            
            <div id="three-container" ></div>
        </div>
    </div>

  </body>
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="app.js"></script>
<script>
console.log('打印场景API',THREE.Scene);
var ip=window.location.host;
const socket = new WebSocket('ws://'+ip+'/ws');

const range = document.getElementById('myRange');

function motorChange(check,id){
  getCheckedVal();
}

function getCheckedVal(){
  var m1=document.getElementById("motor1").checked;
  var m2=document.getElementById("motor2").checked;
  var m3=document.getElementById("motor3").checked;
  var m4=document.getElementById("motor4").checked;
  var gpio=0;
  if(m1){
    gpio|=0x01;
  }else{
    gpio&=0x0E;
  }
  if(m2){
    gpio|=0x02;
  }else{
    gpio&=0x0D;
  }

  if(m3){
    gpio|=0x04;
  }else{
    gpio&=0x0B;
  }

  if(m4){
    gpio|=0x08;
  }else{
    gpio&=0x07;
  }
  var value=range.value;
  console.log("value:",value)
  var data={gpio:gpio,rate:value};
  var json=JSON.stringify(data);
  console.log(json)
  socket.send(json);
}
// 实时监听变化
range.addEventListener('input', function() {
  getCheckedVal();
  console.log('当前值:', this.value);
  document.getElementById('speed').innerHTML=this.value;
});
var vol=document.getElementById("vol");
var euler=document.getElementById("euler");



function requestFullscreen() {
  const element = document.documentElement; // 获取整个文档元素
  
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { /* Safari */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { /* IE11 */
    element.msRequestFullscreen();
  }
}
requestFullscreen();




// Connection opened
socket.addEventListener('open', (event) => {
  socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', (event) => {
  try{
    userData=JSON.parse(event.data);
    if(userData){
        // accelData=userData.accel;
        // gyroData=userData.gyro;
        vol.innerHTML=userData.vol+"伏";
        euler.innerHTML="Roll: "+userData.roll+"°, Pitch: "+userData.pitch+"°, Yaw: "+(-userData.yaw)+"°";

        drone.rotation.set(
            THREE.MathUtils.degToRad(userData.pitch),
            THREE.MathUtils.degToRad(-userData.yaw),
            THREE.MathUtils.degToRad(userData.roll) 
        );
    }
    // 模拟数据生成
    //simulateSensorData();
    //updateDisplay();
    //updateDroneOrientation();
  }catch(e){

  }
  console.log('Message from server:', event.data);
});

// Connection closed
socket.addEventListener('close', (event) => {
  if (event.wasClean) {
    console.log(`Connection closed cleanly, code=${event.code}, reason=${event.reason}`);
  } else {
    console.log('Connection died');
  }
});

// Error handling
socket.addEventListener('error', (event) => {
  console.log('WebSocket error:', event);
});


</script>

</html>